<template>
  <div class="signUp-wrapper">
    <div class="signUp">
      <div class="signUp-head">
        <span>账号注册</span>
      </div>
      <el-form :model="registerForm" id="registerForm" ref="registerForm" label-width="70px" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="username" label="用户名">
          <el-input name="username" v-model="registerForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input name="password" type="password" v-model="registerForm.password" placeholder="密码">
            <template v-if="registerForm.password" slot="append">{{passwordlevel}}</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="确认">
          <el-input type="password" v-model="registerForm.checkPass" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-radio-group v-model="registerForm.sex">
            <el-radio name="sex" :label="0">女</el-radio>
            <el-radio name="sex" :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input name="email" v-model="registerForm.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="birth" label="生日">
          <el-date-picker name="birth" v-model="registerForm.birth" placeholder="选择日期" style="width:100%;"></el-date-picker>
        </el-form-item>
        <el-form-item prop="introduction" label="签名">
          <el-input name="introduction" type="textarea" maxlength="200" v-model="registerForm.introduction" placeholder="签名"></el-input>
        </el-form-item>
        <el-form-item prop="pic" label="头像" size="mini">
          <input type="file" name="file" id="video_pic">
        </el-form-item>
        <div class="signUp-btn">
          <el-button type="primary" @click="handleSignUp">注册</el-button>
          <el-button @click="goback(-1)">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mixin} from '../mixins/index'
import {signUp} from '../api/index'
export default {
  name:'signUp-in',
  mixins:[mixin],
  data(){
    var validatePassword = (rule,value,callback) =>{//密码校验
      if(value === ''){
        callback(new Error('请输入密码'))
      }else if(value.length<6){
        callback(new Error('密码不得少于6位'))
      }else{
        if(this.registerForm.checkPass !== ''){
          this.$refs.registerForm.validateField('checkPass')
        }
      }
      callback()
    }
    var validatePassword2 = (rule,value,callback) =>{//确认密码校验
      if(value === ''){
        callback(new Error('请再次输入密码'))
      }else if(value !== this.registerForm.password){
        callback(new Error('两次输入密码不一致'))
      }else{
        callback()
      }
    }
    return {
      registerForm:{
        username:'',
        password:'',
        passwordlevel:'',//密码强度
        checkPass:'',
        sex:'',
        email:'',
        birth:'',
        introduction:'',
      },
      rules:{
        username:[
          {required:true,trigger:'blur',message:'请输入用户名'}
        ],
        password:[
          {required:true,validator:validatePassword,trigger:'blur'}
        ],
        checkPass:[
          {required:true,validator:validatePassword2,trigger:'blur'}
        ],
        sex:[
          {required:true,message:'请选择性别'}
        ],
        birth:[
          {type:'date',required:true,message:'请选择日期',trigger:'change'}
        ],
        email:[
          {required:true,message:'请输入电子邮箱',trigger:'blur'},
          {type:'email',message:'请输入正确的电子邮箱地址',trigger:['blur','change']}
        ],
        introduction:[
          {required:false,message:'请输入签名',trigger:'blur'},
        ],
      }
    }
  },
  computed:{
    //计算密码强度
    passwordlevel(){
      let level;
      if(/\d/.test(this.registerForm.password) && /[a-z]/.test(this.registerForm.password) && /[A-Z]/.test(this.registerForm.password)){
        level = '强'
      }else if(/^\d+$/.test(this.registerForm.password) || /^[A-Z]+$/.test(this.registerForm.password) || /^[a-z]+$/.test(this.registerForm.password)){
        level = '弱'
      }else{
        level = '中'
      }
      return level
    },
  },
  methods:{
    handleSignUp(){
      this.$refs['registerForm'].validate(valid =>{
        if(valid){
          var formData = new FormData(document.getElementById("registerForm"));
          signUp(formData)
            .then(res =>{
              if(res.code == 1){
                this.notify('注册成功','success')
                setTimeout(()=>{
                  this.goback(-1)
                },2000)
              }else{
                this.notify('用户名已存在','warning');
              }
            }).catch(err => {
              console.log(err);
            })
        }
      })
    },
    goLoginIn(){
      this.$router.push({path:'/loginIn'})
    },
  }
}
</script>

<style scoped>
@import '../assets/css/signUp.css';
</style>